<template>
  <div class="common-table">
    <el-table
      :data="tableData"
      :stripe="stripe"
      :border="border"
      :style="{ width: width }"
      @cell-click="handleCellClick"
      @header-click="handleHeaderClick"
      :default-sort="defaultSort"
    >
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'CommonTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '100%'
    },
    defaultSort: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    handleCellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event)
    },
    handleHeaderClick(column, event) {
      this.$emit('header-click', column, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.common-table {
  .el-table {
    td.el-table__cell div {
      color: #333333;
      font-weight: 600;
    }
  }
}
</style>